<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{margin: 0;}
        .header{
            height: 50px;
            width: 100%;
            background-color: gray;
        }
        .section1{
            height: 400px;
            width: 100%;
            /*background-color: ;*/
        }

        .footer{
            height: 50px;
            width: 100%;
            background-color: gray;
        }

        .left{
            height: 100%;
            width: 20%;
            background-color: antiquewhite;
            float: left;
        }
        .middle{
            height: 100%;
            width: 60%;
            /*background-color: ;*/
            float: left;
        }
        .right{
            height: 100%;
            width: 20%;
            background-color: antiquewhite;
            float: left;

        }
    </style>

    <!--引入VUE-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>
<body>
    <div class="header">
        <h1>头部</h1>
        <div class="user">
            <span>你好，{{user.nick}}</span>
            <span><a href="" @click="logout()">注销</a></span>
        </div>
    </div>
    <div class="section1">
        <div class="left"></div>
        <div class="middle">
            <div class="pri" id="pri">
                <h1>私人网盘</h1>
                <form class="upload" enctype="multipart/form-data">
                    <input type="file"  name="file">
                    <input type="button"  @click="upload()" value="上传">
                </form>

                <table class="fileList">
                    <tr>
                        <th>多选</th>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>类型</th>
                        <th>操作</th>
                        <th>访问级别</th>
                    </tr>
                    <tr v-for="f in priFile_arr">
                        <td><input type="checkbox"></td>
                        <td @click="onClick(f)">{{f.fname}}</td>
                        <td>{{f.size}}Byte</td>
                        <td>{{f.type}}</td>
                        <td>
                            <a href="" @click="del(f.fid)">删除</a>
                            <a :href="f.path" :download="f.fname">下载</a>
                        </td>
                        <td>
                            <a v-if="f.status!=2" @click="changeStatus(2,f.fid)">公开</a>
                            <a v-if="f.status!=1" @click="changeStatus(1,f.fid)">仅好友</a>
                            <a v-if="f.status!=0" @click="changeStatus(0,f.fid)">私密</a>
                        </td>
                    </tr>
                </table>
            </div>

            <br><hr><br>

            <div class="pub" id="pub">
                <h1>公共网盘</h1>
                <table class="fileList">
                    <tr>
                        <th>多选</th>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>类型</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="f in pubFile_arr">
                        <td><input type="checkbox"></td>
                        <td @click="onClick(f)">{{f.fname}}</td>
                        <td>{{f.size}}Byte</td>
                        <td>{{f.type}}</td>
                        <td>
                            <a href="" @click="superDel(f.fid)">删除</a>
                            <a :href="f.path" :download="f.fname">下载</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="right">
            <table v-if="show==1">
                <tr><td>名称:</td><td>{{file.fname}}</td></tr>
                <tr><td>类型:</td><td>{{file.type}}</td></tr>
                <tr><td>大小:</td><td>{{file.size}}ByteByte</td></tr>
                <tr><td>访问级别:</td><td v-if="file.status==0">私密</td><td v-else-if="file.status==1">仅好友</td><td v-else>公开</td></tr>
                    <!--      改名功能还没做,首次上传者先用ID代替名字       -->
                <tr><td>首次上传者:</td><td>{{file.upUid}}</td></tr>
                <tr><td>首次上传时间:</td><td>{{file.upTime}}</td></tr>
                <tr><td>被下载次数</td><td>{{file.downTimes}}</td></tr>
                <tr><td>拥有用户数:</td><td>{{file.quantity}}</td></tr>
                <tr><td>父级目录</td><td v-if="file.ffname==null">无</td><td v-else>{{file.ffname}}</td></tr>
            </table>
        </div>
    </div>
    <div class="footer">
        <h1>脚部</h1>
    </div>


</body>

<script src="../static/js/netDisk.js"></script>
</html>